<script setup lang="ts"></script>

<template>
  <a-popover
    position="bottom"
    trigger="hover"
    :arrow-style="{
      'border-left': '1px solid #EEEFF2',
      'border-bottom': '1px solid #EEEFF2',
      'z-index': 100,
      'display': 'none',
    }"
    :content-style="{
      'border': '1px solid #F2F3F5',
      'padding': '4px',
      'box-shadow': '0 4px 6px - 1px rgba(0, 0, 0, 0.10), 0 2px 4px - 2px',
      'border-radius': '8px',
      /* shadow-md */
    }"
  >
    <i-icons-exclamation
      class="question-icon cursor-pointer text-[#86909C] hover:text-primary"
    />
    <template #content>
      <div class="flex flex-col gap-2">
        <div class="item">
          <div class="icon">
            <i-icons-node-init />
          </div>
          <span>初始化</span>
        </div>
        <div class="item">
          <div class="icon">
            <i-icons-node-normal />
          </div>
          <span>节点运行</span>
        </div>
        <div class="item">
          <div class="icon">
            <i-icons-warning />
          </div>
          <span>节点异常</span>
        </div>
        <div class="item">
          <div class="icon">
            <i-icons-failed />
          </div>
          <span>节点离线</span>
        </div>
        <div class="item">
          <div class="icon">
            <i-icons-node-stop />
          </div>
          <span>节点停止</span>
        </div>
        <div class="item">
          <div class="icon">
            <i-icons-node-analysis-on />
          </div>
          <span>已解析</span>
        </div>
        <div class="item">
          <div class="icon">
            <i-icons-node-analysis-off />
          </div>
          <span>未解析</span>
        </div>
      </div>
    </template>
  </a-popover>
</template>

<style scoped lang="less">
.item {
  @apply flex items-center  px-2;
  .icon {
    @apply flex items-center mr-2;
  }
  span {
    @apply text-xs/22px;
  }
}
</style>
